<template>
    <div class="col-md-8">
        <h3 class="reply">评论回复：</h3>
        <h2 v-show="commonts.length===0">暂无评论，点击左侧添加评论！！！</h2>
        <ul class="list-group">
            <Item v-for="(item,index) in commonts" :key="index" :item="item" :index="index" @deleteText="deleteText(index)" />
        </ul>
    </div>
</template>

<script>
    import Item from "./Item"
    export default {
        name: "List",
        props:['commonts'],
        components:{
            Item
        },
        methods:{
            deleteText (index) {
                this.$emit('deleteText',index)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .reply {
        margin-top: 0px;
    }

    li {
        transition: .5s;
        overflow: hidden;
    }

    .handle {
        width: 40px;
        border: 1px solid #ccc;
        background: #fff;
        position: absolute;
        right: 10px;
        top: 1px;
        text-align: center;
    }

    .handle a {
        display: block;
        text-decoration: none;
    }

    .list-group-item .centence {
        padding: 0px 50px;
    }

    .user {
        font-size: 22px;
    }
</style>